{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>面板</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<section><header><h3>基本类型</h3></header><article><div class="example">
  <div class="panel">
    <div class="panel-body" contenteditable="">默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html" id="code-fhc6cv5acc"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>带标题的面板</h3></header><article><div class="example">
  <div class="panel">
    <div class="panel-heading" contenteditable="">面板标题</div>
    <div class="panel-body" contenteditable="">面板内容</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>带脚注的面板</h3></header><article><div class="example">
  <div class="panel">
    <div class="panel-body" contenteditable="">面板内容</div>
    <div class="panel-footer" contenteditable="">面板脚注</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-footer"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>







<section><header><h3>色彩主题</h3></header><article><div class="example">
  <div class="panel panel-primary">
    <div class="panel-heading" contenteditable="">.panel-primary</div>
    <div class="panel-body" contenteditable="">面板内容</div>
  </div>
  <div class="panel panel-success">
    <div class="panel-heading" contenteditable="">.panel-success</div>
    <div class="panel-body" contenteditable="">面板内容</div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" contenteditable="">.panel-warning</div>
    <div class="panel-body" contenteditable="">面板内容</div>
  </div>
  <div class="panel panel-danger">
    <div class="panel-heading" contenteditable="">.panel-danger</div>
    <div class="panel-body" contenteditable="">面板内容</div>
  </div>
  <div class="panel panel-info">
    <div class="panel-heading" contenteditable="">.panel-info</div>
    <div class="panel-body" contenteditable="">面板内容</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-primary"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-success"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-warning"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-danger"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel panel-info"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>包含表格</h3></header><article><div class="example">
  <div class="panel">
    <div class="panel-heading" contenteditable="">Panel heading</div>
    <table class="table">
      <thead>
        <tr>
          <th>Lorem ipsum.</th>
          <th>Repudiandae, harum!</th>
          <th>Tenetur, corporis.</th>
          <th>Perspiciatis, porro?</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum.</td>
          <td>Officiis, non.</td>
          <td>Molestias, qui.</td>
          <td>Odit, ducimus.</td>
        </tr>
        <tr>
          <td>Lorem ipsum.</td>
          <td>Repellendus, exercitationem!</td>
          <td>Velit, eos.</td>
          <td>Eius, officiis.</td>
        </tr>
        <tr>
          <td>Lorem ipsum.</td>
          <td>Amet, esse!</td>
          <td>Quis, pariatur!</td>
          <td>Totam, quae.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>包含列表</h3></header><article><div class="example">
  <div class="panel">
    <div class="panel-heading">项目</div>
    <ul class="list-group">
      <li class="list-group-item">待办</li>
      <li class="list-group-item">需求</li>
      <li class="list-group-item">任务</li>
      <li class="list-group-item">Bug</li>
      <li class="list-group-item">用例</li>
    </ul>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>


<section><header><h3>面板组</h3></header><article><div class="example">
  <div class="panel-group">
    <div class="panel">
      <div class="panel-heading">面板标题</div>
      <div class="panel-body">面板内容</div>
      <div class="panel-footer">面板脚注</div>
    </div>
    <div class="panel">
      <div class="panel-heading">面板标题</div>
      <div class="panel-body">面板内容</div>
      <div class="panel-footer">面板脚注</div>
    </div>
    <div class="panel">
      <div class="panel-heading">面板标题</div>
      <div class="panel-body">面板内容</div>
      <div class="panel-footer">面板脚注</div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}